<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分管理 - KSA评估系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <!-- 顶部导航 -->
        <nav class="bg-white shadow-lg rounded-lg mb-8">
            <div class="max-w-7xl mx-auto px-4">
                <div class="flex justify-between h-16">
                    <div class="flex items-center space-x-4">
                        <a href="../index.html" class="text-gray-600 hover:text-gray-800">
                            <i class="fas fa-home mr-2"></i>首页
                        </a>
                        <span class="text-gray-400">/</span>
                        <span class="text-gray-800">评分管理</span>
                    </div>
                    <div class="flex items-center">
                        <button class="text-gray-600 hover:text-gray-800 mr-4">
                            <i class="fas fa-bell"></i>
                        </button>
                        <button class="text-gray-600 hover:text-gray-800">
                            <i class="fas fa-user-circle"></i>
                        </button>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 评分类型选择 -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <div class="flex space-x-4 mb-6">
                <button id="selfRatingBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                    自评
                </button>
                <button id="otherRatingBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
                    他评
                </button>
            </div>

            <!-- 自评表单 -->
            <form id="selfRatingForm" class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-gray-700 mb-2">岗位</label>
                        <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">职责</label>
                        <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 mb-2">任务</label>
                    <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3"></textarea>
                </div>

                <div>
                    <label class="block text-gray-700 mb-2">KSA</label>
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <input type="checkbox" class="mr-2">
                            <span class="text-gray-700">知识 (Knowledge)</span>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" class="mr-2">
                            <span class="text-gray-700">技能 (Skill)</span>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" class="mr-2">
                            <span class="text-gray-700">能力 (Ability)</span>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 mb-2">评估标准</label>
                    <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3"></textarea>
                </div>

                <div>
                    <label class="block text-gray-700 mb-2">评分</label>
                    <div class="flex items-center space-x-4">
                        <input type="range" min="0" max="100" class="w-full">
                        <span class="text-gray-700">85</span>
                    </div>
                </div>

                <div class="flex justify-end space-x-4">
                    <button type="button" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
                        保存
                    </button>
                    <button type="button" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">
                        退回
                    </button>
                    <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
                        提交
                    </button>
                </div>
            </form>

            <!-- 他评表单 -->
            <form id="otherRatingForm" class="space-y-6 hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-gray-700 mb-2">账期</label>
                        <input type="month" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">被评分员工工号</label>
                        <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">被评分员工名字</label>
                        <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">评分员工工号</label>
                        <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">评分员工名字</label>
                        <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-gray-700 mb-2">知识 (K)</label>
                        <div class="flex items-center space-x-4">
                            <input type="range" min="0" max="100" class="w-full">
                            <span class="text-gray-700">85</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">技能 (S)</label>
                        <div class="flex items-center space-x-4">
                            <input type="range" min="0" max="100" class="w-full">
                            <span class="text-gray-700">75</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">能力 (A)</label>
                        <div class="flex items-center space-x-4">
                            <input type="range" min="0" max="100" class="w-full">
                            <span class="text-gray-700">90</span>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 mb-2">评语</label>
                    <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3"></textarea>
                </div>

                <div class="flex justify-end space-x-4">
                    <button type="button" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
                        保存
                    </button>
                    <button type="button" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">
                        退回
                    </button>
                    <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
                        提交
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script>
        // 评分类型切换
        const selfRatingBtn = document.getElementById('selfRatingBtn');
        const otherRatingBtn = document.getElementById('otherRatingBtn');
        const selfRatingForm = document.getElementById('selfRatingForm');
        const otherRatingForm = document.getElementById('otherRatingForm');

        function switchToSelfRating() {
            selfRatingBtn.classList.remove('bg-gray-200', 'text-gray-700');
            selfRatingBtn.classList.add('bg-blue-500', 'text-white');
            otherRatingBtn.classList.remove('bg-blue-500', 'text-white');
            otherRatingBtn.classList.add('bg-gray-200', 'text-gray-700');
            selfRatingForm.classList.remove('hidden');
            otherRatingForm.classList.add('hidden');
        }

        function switchToOtherRating() {
            otherRatingBtn.classList.remove('bg-gray-200', 'text-gray-700');
            otherRatingBtn.classList.add('bg-blue-500', 'text-white');
            selfRatingBtn.classList.remove('bg-blue-500', 'text-white');
            selfRatingBtn.classList.add('bg-gray-200', 'text-gray-700');
            otherRatingForm.classList.remove('hidden');
            selfRatingForm.classList.add('hidden');
        }

        selfRatingBtn.addEventListener('click', switchToSelfRating);
        otherRatingBtn.addEventListener('click', switchToOtherRating);

        // 评分滑块联动
        document.querySelectorAll('input[type="range"]').forEach(slider => {
            slider.addEventListener('input', function() {
                this.nextElementSibling.textContent = this.value;
            });
        });
    </script>
</body>
</html> 